<template>
    <div class="box cart-box">
        <div v-if="isEmpty" class="empty-box">
            <!--购物车是空-->
            <i><img src="../../assets/images/cartEmpty.png"></i>
            <p>购物车竟然是空的，快去逛逛吧！</p>
            <router-link to="">去逛逛</router-link>
        </div>
        <div v-else class="pa-l-r-20">
            <div class="management-box">
                <span>共{{productList.length}}件商品</span>
                <b v-if="isManagement" @click="isManagement=!isManagement">管理</b>
                <b v-else @click="isManagement=!isManagement">完成</b>
            </div>
            <div class="list-box">
                <div class="list-details" v-for="(item,index) in productList" :key="index">
                    <div class="status-box" v-if="isManagement">
                        <input type="checkbox" @click="managementSelect(index)" v-bind:checked="item.isSelected" :id="item.id" name="goods">
                        <label :for="item.id" v-if="item.isLapse"></label>
                        <!--<van-checkbox :name="item.id" checked-color="#28DBC7" v-if="item.isLapse" v-model="item.isSelected" @click="managementSelect"></van-checkbox>-->
                        <van-icon name="clear" v-else ></van-icon>
                    </div>
                    <div class="status-box" v-else>
                        <input type="checkbox" @click="settlementSelect(index)" v-bind:checked="item.isSelected" :id="item.id" name="goods">
                        <label :for="item.id"></label>
                        <!--<van-checkbox :name="item.id" checked-color="#28DBC7" v-model="item.isSelected" @click="settlementSelect"></van-checkbox>-->
                    </div>
                    <i>
                        <img :src="item.img">
                        <p v-if="!item.isLapse">商品已失效</p>
                    </i>
                    <div class="main-box">
                        <span class="multi-line">{{item.name}}</span>
                        <p v-if="item.isLapse">
                            <span>¥<b>{{item.price}}</b></span>
                            <van-stepper v-model="item.num" />
                        </p>
                        <p class="lapse" v-else>商品已不能购买，去看看其它商品吧！</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-btn">
            <div class="operating-box pa-l-r-20" v-if="isManagement">
                <input type="checkbox" @click="allSelectSettlement" v-bind:checked="settlementChecked" id="allSettlement">
                <label for="allSettlement">全选</label>
                <!--<van-checkbox checked-color="#28DBC7" v-model="" @click=""></van-checkbox>-->
                <div>
                    <b>合计:</b>¥ <strong>{{total}}</strong>
                    <button>去结算</button>
                </div>
            </div>
            <div class="operating-box pa-l-r-20" v-else>
                <input type="checkbox" @click="allSelectManagement" v-bind:checked="managementChecked" id="allManagement">
                <label for="allManagement">全选</label>
                <!--<van-checkbox checked-color="#28DBC7" v-model="" @click="">全选</van-checkbox>-->
                <div>
                    <span>移入收藏夹</span>
                    <button>删除</button>
                </div>
            </div>
            <h4></h4>
        </div>
        <Navbar :nav="2"></Navbar>
    </div>
</template>

<script>
    import  Navbar from '@/components/navbar/navbar'
    import img from '../../assets/temporary/index200.png'

    export default {
        name: "index",
        components: {
            Navbar
        },
        data() {
            return {
                isEmpty: false, //购物车是否为空
                //商品列表
                productList:[
                    {name:'郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票)',price:263.2,num:2,isSelected:true,isLapse:true,img,id:'a1'},
                    {name:'郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票)',price:263.2,num:2,isSelected:false,isLapse:true,img,id:'a2'},
                    {name:'郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票)',price:124,num:1,isSelected:false,isLapse:false,img,id:'a3'}
                ],
                isManagement:true,//是否切换管理选项
                managementChecked:false,//管理全选
                settlementChecked:false,//结算的全选
                total:'550',//总计
            }
        },
        methods:{
            //结算全选
            allSelectSettlement(){
                this.settlementChecked = !this.settlementChecked
                let selected =this.settlementChecked
                let arr = []
                    this.productList.forEach((item,index) => {
                        if (item.isLapse){
                            arr.push(index)
                        }
                    })
                arr.map((val)=>{
                    this.productList[val].isSelected = selected
                })
            },
            //管理全选
            allSelectManagement(){
                this.managementChecked = !this.managementChecked
                let selected = this.managementChecked
                this.productList.map((val)=>{
                    val.isSelected = selected
                })
            },
            managementSelect(index){
                this.productList[index].isSelected = !this.productList[index].isSelected
                let arr = this.productList.filter((item)=>{
                    return item.isLapse === true
                })
                let arrSelected = arr.filter((item)=>{
                    return item.isSelected
                })
                if (arr.length == arrSelected.length){
                    this.settlementChecked = true
                } else {this.settlementChecked  = false}
             },
            settlementSelect(index){
                this.productList[index].isSelected = !this.productList[index].isSelected
                let arr = this.productList.filter((item)=>{
                    return item.isSelected
                })
                if (arr.length == this.productList.length){
                    this.managementChecked = true
                } else {this.managementChecked = false}
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/css/public";

    .box{
        background-color: $gray_bg;
        padding-bottom: vw(200);
        input {
            display: none;
        }

    }
    .empty-box {
        padding-top: vw(190);
        text-align: center;
        color: #999;
        font-size: vw(28);
        
        img {
            width: vw(360);
            margin: 0 auto vw(40);
        }
        
        a {
            display: block;
            margin: vw(180) auto 0;
            background-image: $gradientBg;
            width: vw(600);
            height: vw(78);
            border-radius: vw(39);
            color: #fff;
            font-size: vw(32);
            line-height: vw(78);
        }
        
    }
    .management-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:vw(30) 0 ;
        font-size: vw(24);
        b{
            font-size: vw(32);
        }
    }
    .list-box{
        .list-details {
            display: flex;
            width:vw(710);
            /*height:280px;*/
            margin-bottom: vw(20);
            padding: vw(40) vw(20);
            border-radius:vw(10);
            background-color: #fff;
            label{
                width: vw(36);
                height: vw(36);
                background-image: url("../../assets/images/icon-inactive.png");
                background-size: 100%;
                background-repeat: no-repeat;
            }
            input:checked +label{
                background-image: url("../../assets/images/icon-active-g.png");
            }
            .status-box {
                display: flex;
                align-items: center;

            }
            >i{
                position: relative;
                width: vw(200);
                margin: vw(0) vw(20) 0 vw(30);
                -webkit-border-radius: vw(4);
                -moz-border-radius: vw(4);
                border-radius: vw(4);
                overflow: hidden;
                p{
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    line-height: vw(200);
                    color: #fff;
                    font-size: vw(28);
                    font-style: normal;
                    background-color: rgba(0,0,0,.6);
                }
            }

            i.van-icon{
                font-size: vw(42);
                &.van-icon-clear{
                    color: #ccc;
                }
            }
            .main-box{
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .multi-line {
                    -webkit-line-clamp: 2;
                    font-size: vw(28);
                    line-height: vw(42);
                    font-weight: bold;
                }
                p{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    >span {
                        color: $org_font;
                        b{
                            font-size: vw(42);
                        }
                    }
                }
                .lapse{
                    color: $green;
                    font-size: vw(24);
                }
            }
        }
    }
    .bottom-btn {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #fff;
        label{
            position: relative;
            padding-left: vw(52);
            color: #999;
            &:before{
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                width: vw(36);
                height: vw(36);
                background-image: url("../../assets/images/icon-inactive.png");
                background-size: 100%;
                transform: translateY(-50%);
                background-repeat: no-repeat;
            }
        }
        input:checked +label::before{
            background-image: url("../../assets/images/icon-active-g.png");
        }
        .operating-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: vw(98);
            color: $org_font;

            /*>div{*/
                /*display: flex;*/
                /**/
            /*}*/
            span{
                margin-right: vw(50);
            }
            b{
                font-size: vw(24);
                color: #404040;
            }
            strong{
                margin-right: vw(20);
                font-size: vw(36);
            }
            button{
                width:vw(200);
                height:vw(78);
                background:$orgGradientBg;
                border-radius:vw(39);
                color: #fff;
                font-size: vw(32);
            }
        }
        h4{
            width: 100%;
            height: vw(98);
        }
    }
</style>
